<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div id="">
				<p v-show="linkIndex===0">
					<a :[aAtrr]="urls[0]">淘宝</a>
				</p>
				<p v-show="linkIndex ==1">
					<a :[aAtrr]="urls[1]">tmall</a>
				</p>
				<p v-show="linkIndex ==2">
					<a :[aAtrr]="urls[2]">京东</a>
				</p>
			</div>
			<div id="">
				<button type="button" @[eventName]="chengIndex(0)">淘宝</button>
				<button type="button" @[eventName]="chengIndex(1)">天猫</button>
				<button type="button" @[eventName]="chengIndex(2)">京东</button>
			</div>
		</div>
		<script type="text/javascript">
			// var vm1 = new Vue({
			// 	el:app,
			// 	data(){return {
			// 		eventname:'click',
			// 		aatrr:'href',
			// 		linkIndex:0,
			// 		urls:[
			// 			'https:www.taobao.com',
			// 			'https:www.tmall.com',
			// 			'https:www.jd.com',
			// 		],
			// 		}
			// 	},
			// 	methods:{
			// 		/**
			// 		 * vue创建实例时，会自动为methods绑定当前实例this
			// 		 * 保证在事件监听时，回调始终指向当前组件实例
			// 		 * 方法避免使用箭头函数，箭头函数会组织vue正确绑定组件实例this
			// 		 * 
			// 		 * @[eventName]="chengIndex(2)"
			// 		 * 函数名+（） 括号并不是执行符号，是传入实参的容器。
			// 		 * onclick="()=>chengIndex(2)"
			// 		 * 
			// 		 * 实例中直接挂载methods中的每一个方法，methods更多的是一个方法容器
			// 		 * 
			// 		 * lodash js工具库
			// 		 * */
			// 	chengIndex(index){
			// 		this.linkIndex=index;
			// 	}	
			// 	}
			// })
		
			function Vue(options){
				this.$data=options.data();
				this._methods=options.methods;
				console.log(options.methods)
				console.log('123213')
				this._init(this);
			}
			
			Vue.prototype._init=function(vm){
				initData(vm);
				initMethods(vm);
			}
			function initData(vm){
				for(var key in vm.$data){
					(function(key){
						Object.defineProperty(vm,key,{
							get:function(){
								return vm.$data[key];
							},
							set:function(newValue){
								vm.$data[key]=newValue
							}
						})
					})(key)
				}
			}
			function initMethods(vm){
				for(var key in vm._methods){
					vm[key]=vm._methods[key];
					console.log(vm)
				}
			}
			
			var vm=new Vue({
				data(){
					return {
						a:1,
						b:2
					}
				},
				methods:{
					increaseA(num){
						this.a += num;
					},
					increaseB(num){
						this.b += num;
					},
					getTotal(){
						console.log(this.a+this.b)
					}
				}
			})
			vm.increaseA(1);
			vm.increaseA(1);
			vm.increaseA(1);
			vm.increaseA(1);
			
			vm.increaseA(2);
			vm.increaseA(2);
			vm.increaseA(2);
			vm.increaseA(2);
			vm.getTotal();
		</script>
	</body>
</html>
